<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="ThemeBucket">
  <link rel="shortcut icon" th:href="@{#}" type="image/png">

  <title>Invoice</title>

    <div th:include="common :: commonheader"/>

</head>

<body class="sticky-header">

<section>
    <!-- left side start-->
    <div th:replace="common :: #leftmenu " ></div>
    <!-- left side end-->
    
    <!-- main content start-->
    <div class="main-content" >

        <!-- header section start-->
        <div th:replace="common :: headermenu" ></div>
        <!-- header section end-->

        <!-- page heading start-->
        <!--<div class="page-heading">-->
            <!--Page Tittle goes here-->
        <!--</div>-->
        <!-- page heading end-->

        <!--body wrapper start-->
        <div class="wrapper">

            <div class="panel">
                <div class="panel-body invoice">
                    <div class="row">
                        <div class="col-md-4 col-sm-4">
                            <h1 class="invoice-title">订单详情</h1>
                        </div>
                        <div class="col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4">
                            <img class="inv-logo" th:src="@{/images/invoice-logo.jpg}" alt=""/>
                            <p>121 King Street, Melbourne <br/>
                                Victoria 3000 Australia <br/>
                                Phone: +61 3 8376 6284</p>
                        </div>
                    </div>
                    <div class="invoice-address">
                        <div class="row">
                            <div class="col-md-5 col-sm-5">
                                <h4 class="inv-to">买家信息：</h4>
                                <h2 class="corporate-id">[[${orders.member.name}]]</h2>
                                <p>
                                    城市：[[${orders.member.city}]]<br>
                                    Email:[[${orders.member.email}]],
                                    电话: [[${orders.member.phone}]]
                                </p>

                            </div>
                            <div class="col-md-4 col-md-offset-3 col-sm-4 col-sm-offset-3">
                                <div class="inv-col"><span>订单号#</span> [[${orders.orderNum}]]</div>
                                <div class="inv-col"><span>日期 :</span> [[${orders.orderTime}]]</div>
                                <h1 class="t-due">合计支付</h1>
                                <h2 class="amnt-value">$ [[${total*0.96}]]</h2>
                            </div>
                        </div>
                    </div>
                </div>
                <table class="table table-bordered table-invoice">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>商品</th>
                        <th class="text-center">价格</th>
                        <th class="text-center">数量</th>
                        <th class="text-center">合计</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="product:${orders.products}">
                        <td>1</td>
                        <td>
                            <h4>[[${product.productName}]]</h4>
                            <p>[[${product.productDesc}]]</p>
                        </td>
                        <td class="text-center"><strong>$ [[${product.price}]]</strong></td>
                        <td class="text-center"><strong>[[${product.count}]]</strong></td>
                        <td class="text-center"><strong>$ [[${product.price * product.count}]]</strong></td>
                    </tr>
                    <tr>
                        <td colspan="2" class="payment-method">
                            <h4>支付方式</h4>
                            <p>[[${orders.payTypeStr}]]</p>

                            <br>
                            <h3 class="inv-label">Thank you for your business</h3>
                        </td>
                        <td class="text-right" colspan="2">
                            <p>小计</p>
                            <p>手续费 (1%)</p>
                            <p>折扣 (5%)</p>
                            <p><strong>合计</strong></p>
                        </td>
                        <td class="text-center">
                            <p>$ [[${total}]]</p>
                            <p>$ [[${total*0.01}]]</p>
                            <p>$ [[${total*0.05}]]</p>
                            <p><strong>$ [[${total*0.96}]]</strong></p>
                        </td>
                    </tr>

                    </tbody>
                </table>
            </div>
            <div class="text-center ">
                <a class="btn btn-success btn-lg" th:href="@{/orders/list}"><i class="fa fa-check"></i> 确定 </a>
                <a class="btn btn-primary btn-lg" target="_blank" th:href="@{/invoice_print.html}"><i class="fa fa-print"></i> 打印 </a>
            </div>

        </div>
        <!--body wrapper end-->

        <!--footer section start-->
        <footer class="">
            2020 &copy; AdminEx by ThemeBucket </a>
        </footer>
        <!--footer section end-->


    </div>
    <!-- main content end-->
</section>

<div th:include="common :: #commonscript" />

</body>
</html>
